Skip to main content

Developing an HTML5 Control

. General
  • HTML5 controls can be displayed only on web visualizations (CODESYS WebVisu).

    If a visualization with an HTML5 control should run on a CODESYS TargetVisu for example, then a warning is issued. The HTML5 controls are not displayed there.

  • Using an HTML5 control requires that the overlay functionality is enabled.

    Therefore, in the Visualization Manager, select the Support client animations and overlay of native elements option. Otherwise an error is issued.

    For more information, see: Visualization Manager

Tip

Note the topic of "Security" when developing and using an HTML5 control. For more information, see:

Example: HTML5-API

Demo control as a template

Download the HTML5 API example to your computer. Then the demo controls with element wrappers JavaScript are available to you.

We recommend using the copy of an ElementWrapper.js from the HTML5 examples as a template and adapting the name and functionality to your HTML5 control.

For more information, see Example: HTML5-API

On the example page, you will find detailed information about HTML5 controls and you can download the sample project there. The contents of the JavaScript file ElementWrapper.js is particularly helpful.